          <template>
  <div class="room-wrap">
    <div :class="{eyeModel: this.isEyes}"></div>
    <bjy-room @eyeModel="changeColor"></bjy-room>
    <before-study></before-study>
    <iframe
      ref="padFrame"
      class="pad-frame"
      id="pad-frame"
      frameborder="0"
    ></iframe>
    <div id="yxp:room:index:12" class="pad-mask" v-show="isPadMask||bjyUser.status==1"></div>
<!--    <a-dropdown :trigger="['click']" v-if="0">-->
<!--      <a class="fixed-controll">-->
<!--        tools-->
<!--      </a>-->
<!--      <template slot="overlay">-->
<!--        <a-menu>-->
<!--          <a-menu-item @click="openFrame">打开</a-menu-item>-->
<!--          <a-menu-item @click="classOpration(true)">上课</a-menu-item>-->
<!--          <a-menu-item @click="classOpration(false)">下课</a-menu-item>-->
<!--        </a-menu>-->
<!--      </template>-->
<!--    </a-dropdown>-->

    <a-modal
      title="输入房间号"
      :visible="roomInputVisible"
      @cancel="() => (this.roomInputVisible = false)"
      @ok="confirmRoomId"
      :zIndex="1007"
    >
      <a-input v-model="roomId"></a-input>
    </a-modal>
  </div>
</template>
<script>
import {
  __waitForSync__
} from '@/utils/tools'
let eventEmitter = BJY.eventEmitter;
let auth = BJY.auth;
// loading组件，进教室之前的准备工作
import BjyRoom from "@/components/Room/Room.vue";
import { Modal, Input, Dropdown, Menu } from "ant-design-vue";
import mTypes from '@/store/mutationsTypes'
import { mapState, mapMutations } from "vuex";
import beforeStudy from './beforeStudy.vue'
export default {
  name: "Room",
  components: {
    BjyRoom: BjyRoom,
    AModal: Modal,
    AInput: Input,
    ADropdown: Dropdown,
    AMenu: Menu,
    AMenuItem: Menu.Item,
    beforeStudy
  },
  data() {
    return {
      bjyUser: {},
      class_mode: '',
      roomInputVisible: false,
      roomId: "",
      padUrl: process.env.VUE_APP_PADURL.replace('127.0.0.1', document.location.hostname),
      padFrame: {},
      timer: "",
      isEyes: false,
      isPadMask: false
    };
  },
  watch: {
    isPadMask: {
      handler(val, oldVal) {
        // 处理隐身用户-监课
        if(this.bjyUser.status == 1) val = true
        eventEmitter.trigger(eventEmitter.ZWZ_PAD_CMD, {
          cmd: 'PAD:ROOM',
          event: 'WINDOW:OPRATER',
          args: !val
        })
      },
      deep: true,
      // immediate: true
    },
  },
  computed: {
    ...mapState(["access_token", "userInfo"])
  },
  methods: {
    ...mapMutations([mTypes.loginModal]),
    openFrame() {
      let status = this.$refs.padFrame.style.display;
      if (status == "block") {
        this.$refs.padFrame.style.display = "none";
      } else {
        this.roomInputVisible = true;
      }
    },
    confirmRoomId() {
      if (!this.roomId) return false;
      let status = this.$refs.padFrame.style.display;
      this.padUrl = `${process.env.VUE_APP_PADURL.replace('127.0.0.1', document.location.hostname)}?room_id=${this.roomId}`
      this.padFrame.location.href = this.padUrl
      if (this.roomId !== '') {
        this.$refs.padFrame.style.display =
          status === "block" ? "none" : "block";
      }
      this.roomInputVisible = false;

    },
    classOpration (start) {
      !!start ? eventEmitter.trigger(eventEmitter.CLASS_START_TRIGGER) : eventEmitter.trigger(eventEmitter.CLASS_END_TRIGGER)
    },
    syncController(controller) {
      this.padFrame.postMessage(
        {
          cmd: "browserSync",
          msg: {
            controller: controller
          }
        },
        "*"
      );
    },
    sendToChild(msg) {
      if (msg.data.cmd === "loaded") {
        console.log("pad room loaded 首次通信完成");
        this.padFrame.postMessage(
          {
            cmd: "login",
            msg: {
              access_token: this.access_token,
              userInfo: this.userInfo
            }
          },
          "*"
        );
        eventEmitter.trigger(eventEmitter.ZWZ_PAD_CMD, {
          cmd: 'PAD:ROOM',
          event: 'WINDOW:OPRATER',
          args: this.bjyUser.status == 1 ? false : !this.isPadMask
        })
      } else if (msg.data.cmd === 'reLogin') {
        let {is_assist} = this.userInfo
        if (0 === +is_assist) {
          // 学生 弹出登录框
          this[mTypes.loginModal](true)
        } else {
          // 助教 老师 退到首页重新登录
          this.$router.push("/mycourse");
        }
      } else if (msg.data.cmd == 'PAD:ROOM') {
        msg.data.event && eventEmitter.trigger(msg.data.event, msg.data.data)
      }
    },
    changeColor (val) {
      console.log(val + '()()())')
      this.isEyes = val
    },
    padMaskInit () {
      let that = this
      // 处理隐身用户-监课
      if(Number(BJY.store.get('user.status')) == 1){
        this.isPadMask = true
        return false
      }
      if(/_121/.test(that.classMode)){
        this.isPadMask = auth.isStudent() ? true : false
        eventEmitter.trigger(eventEmitter.ZWZ_PAD_FORBID, {
          isPadMask: this.isPadMask
        })
      }else if(/_SMALL/i.test(that.classMode)){
        this.isPadMask = auth.isStudent() ? true : false
      }
      // console.log('check.bjy.status', auth.isStudent(), that.classMode, that.isPadMask)
    }
  },
  mounted() {
    console.log(this.padUrl, '--------')
    let that = this
    that.classMode = BJY.store.get('yxp_class_mode')
    this.padFrame = this.$refs.padFrame.contentWindow;
    window.addEventListener("message", this.sendToChild);
    eventEmitter
    .one(
        eventEmitter.DOC_ALL_REQ,
        function (event, data) {
            that.bjyUser = BJY.store.get('user')
            let purl = ''
            let {has_pad, room_id, class_mode, is_check, access_token} = Object.assign({}, that.$route.query, BJY.query)
            // 初始化操作者
            that.padMaskInit()
            // 接收广播事件
            BJY.api.onReceiveBroadcast(
              'YXP_PAD_FORBID_INIT',
              function(fromeId, data, cache) {
                // 忽略自己广播信息
                if(fromeId == BJY.store.get('user.id')) return false
                that.padMaskInit()
              }
            )
            // 广播init事件-忽略隐身用户
            Number(BJY.store.get('user.status')) == 0 && BJY.api.sendBroadcast('YXP_PAD_FORBID_INIT', {}, {all: true})
            // 加载pad
            if(!!has_pad && !!room_id){
              purl = `${that.padUrl}?room_id=${room_id}`
              typeof class_mode !== 'undefined' && (purl += `&class_mode=${class_mode}`)
              typeof is_check !== 'undefined' && (purl += `&is_check=${is_check}`)
              typeof access_token !== 'undefined' && (purl += `&access_token=${access_token}`)
              that.padFrame.location.href = purl
              that.$refs.padFrame.style.display = 'block'
            }else{
              that.$refs.padFrame.style.display = 'none'
            }
        }
    ).on(eventEmitter.ZWZ_PAD_CMD, (event, data) => {
      this.padFrame.postMessage(data, "*");
    }).on(eventEmitter.ZWZ_PAD_FORBID, (event, data) => {
      // this.isPadMask = data.isPadMask
      // 等待同步数据完成
      (async () => {
        if(data.isPadMask == false){
          await __waitForSync__()
        }
        this.isPadMask = data.isPadMask
      })()
    }).on(eventEmitter.ZWZ_PAD_FORBID_INIT, (event, data) => {
      this.padMaskInit()
    });
  },
  beforeDestroy() {
    window.removeEventListener("message", this.sendToChild);
  }
};
</script>

<style lang="less">
.room-wrap{
  position: relative;
  height: 100%;
}
.pad-frame {
  display: none;
  position: absolute;
  background-color: #fff;
  left: 0;
  top: 0;
  z-index: 999;
  width: calc(100% - 290PX); /* no */
  height: calc(100% - 40PX); /* no */
}

.fixed-controll {
  position: fixed;
  z-index: 1006;
  top: 200px;
  right: 100px;
  width: 100px;
  text-align: center;
  color: #fff;
  background-color: #27bfa3;
}
.eyeModel {
  position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-color: #FFB139;
    opacity: 0.07;
    pointer-events: none;
}
.room-wrap {
  ::-webkit-scrollbar {
    width: 4px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
  }
}
.pad-mask {
  position: absolute;
  background-color: rgba(255,255,255,0);
  left: 0;
  top: 0;
  z-index: 1000;
  width: calc(100% - 290PX); /* no */
  height: calc(100% - 40PX); /* no */
}
</style>
